import React, { Component } from 'react'
import { connect } from "react-redux"
import { Redirect, Switch, Route } from "react-router-dom"
import { Layout } from 'antd';
import { reqCategory } from "../../api/index"
import { createDeleteUserInfoAction } from "../../redux/actions/login_action"
import LeftNav from './left_nav/LeftNav';
import Header from "../admin/header/Header"
import Home from "../../components/home/Home"
import Bar from "../bar/Bar"
import Product from "../product/Product"
import Detail from '../product/Detail';
import AddUpdate from '../product/AddUpdate';
import Category from "../category/Category"
import Line from "../line/Line"
import Pie from "../pie/Pie"
import Role from "../role/Role"
import User from "../user/User"

import "./css/admin.less"


const { Footer, Sider, Content } = Layout;
class Admin extends Component {

    //注销
    logout = () => {
        //清空redux状态，并去action里清空localStorage
        this.props.deleteUserInfo()
    }

    //获取商品分类
    getCategory = () => {
        reqCategory()
            .then((result) => {
                console.log(result);
            })
    }
    
    //【规则】：在render里若想实现跳转,最好用<Redirect/>
    render() {

        const { isLogin } = this.props.userInfo
        // 如果你想非法直接登录admin页面，抱歉 回login吧！
        if (!isLogin) {
            return <Redirect to='/login' />
        } else {
            return (
                <Layout className="admin">
                    <Sider className="sider">
                        <LeftNav />
                    </Sider>
                    <Layout className="right">
                        {/* 这个<Header/>是我自己定义的，非antd */}
                        <Header></Header>
                        {/* Content不拆成组件，因为里面要写路由 */}
                        <Content className="content">
                            <Switch>
                                <Route path="/admin/home" component={Home}/>
                                <Route path="/admin/prod_about/category" component={Category}/>
                                {/* 因为默认模糊匹配，如若不加"exact"，将匹配不到下两条路由 */}
                                <Route path="/admin/prod_about/product" component={Product} exact/>  
                                <Route path="/admin/prod_about/product/detail/:id" component={Detail} />
                                {/* 添加/修改的页面 同理 */}
                                <Route path="/admin/prod_about/product/add_update" component={AddUpdate} exact/>
                                <Route path="/admin/prod_about/product/add_update/:id" component={AddUpdate}/>
                                <Route path="/admin/user" component={User}/>
                                <Route path="/admin/role" component={Role}/>
                                <Route path="/admin/charts/bar" component={Bar}/>
                                <Route path="/admin/charts/line" component={Line}/>
                                <Route path="/admin/charts/pie" component={Pie}/>
                                <Redirect to="/admin/home"/>
                            </Switch>
                        </Content>
                        <Footer className="footer">推荐使用谷歌浏览器，可以获取最佳用户体验</Footer>
                    </Layout>
                  
                </Layout>
            )
        }
    }
} 

export default connect(
    state => ({ userInfo: state.userInfo }),
    {
        deleteUserInfo: createDeleteUserInfoAction,
    }
)(Admin)


